<template>
  <el-dialog title="提示"
             :class="pub_dialog"
             :visible.sync="dialogVisible"
             @close="close"
             width="30%">
    <el-form :model="form">
      <el-form-item>

      </el-form-item>
      <el-form-item prop="method">
        <el-upload class="upload-demo"
                   drag
                   :auto-upload="false"
                   :on-remove="handleRemove"
                   :on-change="handleChange"
                   :file-list="fileList"
                   multiple
                   action="#">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip"
               slot="tip">只能上传jpg/png文件,且不超过500kb</div>
        </el-upload>
      </el-form-item>
    </el-form>
    <span slot="footer"
          class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary"
                 @click="sendData">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>

export default {
  components: {},
  props: {
    visiable: {
      type: Boolean,
      require: true
    }
  },
  data () {
    return {
      dialogVisible: this.visiable,
      form: {
        file: [],
        username: this.username
      },
      fileList: [],
    };
  },
  watch: {},
  methods: {
    close () {
      this.$emit('func', this.dialogVisible)
    },
    handleRemove (file, fileList) {
      this.fileList = fileList;
    },
    handleChange (file, fileList) {
      this.fileList = fileList;
    },
    sendData () {
      if (this.fileList.length !== 0) {
        this.fileList.forEach(item => {
          this.form.file.push(item.raw);
        });
        this.$api.productBom.postData(this.form).then(res => {
          if (res.data.status == 1) {
            this.$message.success(res.data.tips);
            this.dialogFormVisible = false;
          } else {
            this.$message.success(res.data.tips)
          }
        });
      } else {
        this.$message.warning('请选择文件之后再进行提交')
      }
    }
  },
  created () { },
  mounted () { },
}
</script>
<style lang='less'>
//@import url(); 引入公共css类
@import "../../common/css/largeDialog.less";
.el-dialog {
  .el-form {
    .el-upload {
      width: 100%;
      .el-upload-dragger {
        width: 100%;
      }
    }
    .el-upload__tip {
      color: red;
    }
  }
}
</style>